<template>
  <n-scrollbar>
      <n-data-table :columns="columns" :data="musicListData" class="music-list-data" />
  </n-scrollbar>
</template>

<script setup lang="jsx">
import { onMounted, ref, h } from "vue";
import { getMusicData,getMusicPlayUrl } from "../api/music";
import { NTag } from "naive-ui";

const mediaPlayer = document.createElement('audio')

const musicListData = ref([]);
const columns = [
  {
    title: "名称",
    key: "name",
  },
  {
    title: "歌手",
    key: "singer",
    render(row) {
      if(row.singer===null||row.singer===undefined||row.singer.length===0)
      return <NTag>无歌手信息</NTag>
      return row.singer.map((it) => (
        <NTag style={{ marginRight: "6px" }} type={"info"} bordered={false}>
          {it.name}
        </NTag>
      ));
    },
  },{
    title:'操作',
    render(row,index){
      return (<nButton onClick={async ()=>{
        let data = await getMusicPlayUrl(row)
        mediaPlayer.src = data
        mediaPlayer.play()
        console.log(data)
        }}>播放</nButton>)
    }
  }
];
onMounted(async () => {
  const data = await getMusicData();
  console.log(data.songlist);
  musicListData.value = data.songlist;
});
</script>
<style lang="css" scoped>


</style>
